<template>
  <div class="modelType2-box"
       :style="styleMianObject">
    <div class="box-name"
         :style="nameStyleObject">{{ list.contentLists[0].title }}</div>
    <div class="box-style"
         :style="boxStyleObject"
         v-html="list.contentLists[0].content || ''"></div>
  </div>
</template>

<script>

export default {
  props: {
    list: {
      type: Object,
      default: {
        title: ""
      }
    }
  },
  data () {
    return {
      nameStyleObject: {
        fontSize: '40px',
        height: '60px',
        paddingLeft: '30px'
      },

      boxStyleObject: {
        height: 'calc(100% - 100px)',
        padding: '130px',
        fontSize: '48px',
      },

      styleMianObject: {
        padding: '10px 30px'
      },

      zoom: 1
    }
  },
  mounted () {
    this.$nextTick(() => {
      const offsetWidth = document.getElementsByClassName("modelType2-box")[0].offsetWidth
      console.log(offsetWidth)
      this.zoom = offsetWidth / 1898
      this.nameStyleObject.fontSize = 40 * this.zoom + 'px'
      this.nameStyleObject.height = 60 * this.zoom + 'px'
      this.nameStyleObject.paddingLeft = 30 * this.zoom + 'px'

      this.styleMianObject.padding = `${10 * this.zoom}px ${30 * this.zoom}px`

      this.boxStyleObject.height = `calc(100% - ${100 * this.zoom}px)`
      this.boxStyleObject.fontSize = `${48 * this.zoom}px !important`
      this.boxStyleObject.padding = `${130 * this.zoom}px !important`
    })

  },

}
</script>
<style lang="less" scoped>
.modelType2-box {
  background: url(../../../assets//img/bg-type/type2-1.png) no-repeat 100% 100%;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  padding: 12px;
  box-sizing: border-box;
  position: relative;
  .box-style {
    background: url(../../../assets//img/bg-type/type2-2.png) no-repeat 100%
      100%;
    background-size: 100% 100%;
    height: calc(100% - 300px);
    display: block;
  }
  .title-style {
    position: absolute;
    bottom: 45%;
    color: #004da1;
    width: 50%;
    font-weight: bold;
  }
  .box-name {
    color: #004da7;
  }
}
</style>
